<template>
  <div class="position-box">
    <div class="banner-position">
      <el-row :gutter="50">
        <el-col :span="40">
          <div class="banner-position-title">首页轮播图</div>
          <div class="banner-position-img">
            <div :class="[{'imgbox-v':!bannerList.defaultImg}]">
              <img :src="bannerList.defaultImg" />
            </div>
            <div class="banner-position-mask hide">
              <div class="position-mask-box">
                <div class="position-mask-title">首页轮播图</div>
                <div class="position-mask-tip">
                  <div>
                    广告位数量 :
                    <span>{{bannerList.count}}</span>
                  </div>
                  <div>
                    使用中数量 :
                    <span>{{bannerList.used}}</span>
                  </div>
                  <div>
                    空闲数量 :
                    <span>{{bannerList.free}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <el-upload
            :class="['upload-demo',{'hidden':bannerList.btnShow}]"
            action="1"
            :before-upload="beforeUpload"
            :http-request="uploadBannerFile"
            :show-file-list="unshow"
          >
            <el-button size="small" type="primary" v-if="!bannerList.defaultImg">添加默认广告图</el-button>
            <el-button size="small" type="primary" v-else>替换默认广告图</el-button>
          </el-upload>
        </el-col>
        <el-col :span="25">
          <div class="grid-content bg-purple">
            <div class="banner-position">
              <div class="banner-position-title">课堂页轮播图</div>
              <div class="banner-position-img">
                <div :class="[{'imgbox-v':!classList.defaultImg}]">
                  <img :src="classList.defaultImg" />
                </div>
                <div class="banner-position-mask hide">
                  <div class="position-mask-box">
                    <div class="position-mask-title">课堂页轮播图</div>
                    <div class="position-mask-tip">
                      <div>
                        广告位数量 :
                        <span>{{classList.count}}</span>
                      </div>
                      <div>
                        使用中数量 :
                        <span>{{classList.used}}</span>
                      </div>
                      <div>
                        空闲数量 :
                        <span>{{classList.free}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <el-upload
                :class="['upload-demo',{'hidden':classList.btnShow}]"
                action="1"
                :before-upload="beforeUpload"
                :http-request="uploadClassFile"
                :show-file-list="unshow"
              >
                <el-button size="small" type="primary" v-if="!classList.defaultImg">添加默认广告图</el-button>
                <el-button size="small" type="primary" v-else>替换默认广告图</el-button>
              </el-upload>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <div class="el-upload__tip">上传图片的最佳尺寸：702像素*300像素，其他尺寸会影响页面效果，格式png，jpeg，jpg，gif。</div>
      </el-row>
    </div>
  </div>
</template>
<script>
import { uploadFile, getFile, overview, defaultImg } from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      bannerList: {
        used: 0,
        free: 0,
        count: 6,
        defaultImg: "",
        btnShow: false
      },
      classList: {
        used: 0,
        free: 0,
        count: 6,
        defaultImg: "",
        btnShow: false
      },
      unshow: false
    };
  },
  created() {
    overview({
      companyId: this.merchantId,
      appId: 0
    }).then(res => {
      this.bannerList = res.data[0];
      this.classList = res.data[1];
    });
  },
  methods: {
    beforeUpload(file) {
      const isJPG =
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/gif";
      // const isLt2M = file.size / 1024 < 40;
      if (!isJPG) {
        this.$message.error("上传图片格式错误!");
      }
      // if (!isLt2M) {
      //   this.$message.error("上传图片大小不能超过 40kb!");
      // }
      const isSize = new Promise(function(resolve, reject) {
        let width = 702;
        let height = 300;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {},
        () => {
          this.$message.error("上传的图片必须是702px x 300px");
          return Promise.reject();
        }
      );

      return isJPG && isSize;
    },
    uploadBannerFile(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);
      uploadFile(data).then(res => {
        this.bannerList.defaultImg = `${getFile}?id=${res.data.id}`;

        this.replaceBanner();
      });
    },
    uploadClassFile(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);

      uploadFile(data).then(res => {
        this.classList.defaultImg = `${getFile}?id=${res.data.id}`;
        this.replaceClassBanner();
      });
    },
    replaceBanner() {
      let data = {
        companyId: this.merchantId,
        position: 0,
        imgUrl: this.bannerList.defaultImg,
        appId: 0
      };
      defaultImg(data).then(res => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "替换默认banner图片成功"
          });
          overview({
            companyId: this.merchantId,
            appId: 0
          }).then(res => {
            this.bannerList = res.data[0];
            this.classList = res.data[1];
          });
        }
      });
    },
    replaceClassBanner() {
      let data = {
        companyId: this.merchantId,
        position: 1,
        imgUrl: this.classList.defaultImg,
        appId: 0
      };
      defaultImg(data).then(res => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "替换默认banner图片成功"
          });
          overview({
            companyId: this.merchantId,
            appId: 0
          }).then(res => {
            this.bannerList = res.data[0];
            this.classList = res.data[1];
          });
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
.position-box {
  display: flex;
  padding: 20px 40px;
}
.el-upload-list {
  display: none;
}

.banner-position {
  margin-right: 50px;

  .banner-position-img {
    width: 200px;
    height: 200px;
    border: 1px solid #dcdfe6;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
    }
    .banner-position-img-item {
      height: 100px;
    }
    .banner-position-mask {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 200px;
      left: 0;
      background: #dcdfe6;
      opacity: 0.5;
      transition: all 0.8s linear;
      .position-mask-box {
        display: inline-box;
        text-align: center;
        margin-top: 50px;
        .position-mask-tip {
          text-align: right;
          line-height: 20px;
          div {
            margin: 5px 47px;
          }
        }
      }
    }
  }
  .banner-position-img:hover {
    .banner-position-mask {
      top: 0;
    }
  }
}
.banner-position-title {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.imgbox-v {
  width: 200px;
  height: 200px;
}
.imgbox img {
  display: block;
  width: auto;
  height: 200px;
}
.upload-demo {
  text-align: center;
}
.hidden {
  display: none;
}
.el-col {
  text-align: center;
}
.el-upload__tip {
  color: #a3a6ab;
  width: 350px;
}
</style>
